<template>
    <div class="codeManage">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="草稿箱" name="0">
                <el-table :data="draftList" border tooltip-effect="dark" style="width: 100%;">
                    <el-table-column prop="userVersion" align="center" label="版本号" width="110"></el-table-column>
                    <el-table-column prop="userDesc" align="center" label="描述"></el-table-column>
                    <el-table-column prop="sourceMiniprogram" label="来源小程序" align="center" width="120"></el-table-column>
                    <el-table-column prop="sourceMiniprogramAppid" label="来源小程序ID" align="center" width="180"></el-table-column>
                    <el-table-column prop="developer" label="上传开发者" align="center" width="100"></el-table-column>
                    <el-table-column label="提交时间" align="center" width="140">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime | timestampToMin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="120">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-button class="checkCard" @click="addTotemplate(scope.row.draftId)" type="text"
                                    style="color: #51cdcb;" size="medium">添加到模板库</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="小程序模板库" name="1">
                <el-table :data="templateList" border tooltip-effect="dark" style="width: 100%;">
                    <el-table-column prop="userVersion" label="版本号" align="center" width="110"></el-table-column>
                    <el-table-column prop="userDesc" align="center" label="描述"></el-table-column>
                    <el-table-column prop="sourceMiniprogram" label="来源小程序" align="center" width="120"></el-table-column>
                    <el-table-column prop="sourceMiniprogramAppid" label="来源小程序ID" align="center" width="170"></el-table-column>
                    <el-table-column prop="developer" align="center" label="上传开发者" width="95"></el-table-column>
                    <el-table-column prop="templateId" label="模板ID" align="center" width="70"></el-table-column>
                    <el-table-column label="添加到模板库时间" align="center" width="140">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime | timestampToMin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-button class="checkCard" @click="addVersion(scope.row)" type="text"
                                    style="color: #51cdcb;" size="medium">添加版本</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog class="code-manage-dialog" title="添加小程序版本信息" :visible.sync="dialogVisible">
            <el-form :model="dialogForm" label-width="100px" inline label-position="left">
                <el-form-item label="模板ID">
                    <div>{{ dialogForm.templateId }}</div>
                </el-form-item>
                <br>
                <el-form-item label="小程序ID">
                    <div>{{ dialogForm.appId }}</div>
                </el-form-item>
                <br>
                <el-form-item label="版本号">
                    <el-input v-model="dialogForm.versionNum" auto-complete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="描述">
                    <el-input type="textarea" :rows="2" v-model="dialogForm.desc" auto-complete="off"
                        style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getCookie, sortByCreateTime } from '@/utils/util.js'
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data() {
        return {
            dialogVisible: false,
            activeName: '0',
            draftList: [],
            templateList: [],
            dialogForm: {
                templateId: '',
                versionNum: '',
                appId: '',
                desc: ''
            }
        }
    },
    created() {
        if (this.activeName === '0') {
            this.getTemplateDraftList();
        } else if (this.activeName === '1') {
            this.getTemplateList();
        }
    },
    methods: {
        getTemplateDraftList() {
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/getTemplateDraftList', {
                headers: headers,
                method: 'POST'
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.code === 200) {
                    let draftList = res.data.draftList
                    draftList.sort(sortByCreateTime) // sort排序
                    this.draftList = draftList
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({ path: '/login' })
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        getTemplateList() {
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/getTemplateList', {
                headers: headers,
                method: 'POST'
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.code === 200) {
                    let templateList = res.data.templateList;
                    templateList.sort(sortByCreateTime) // sort排序
                    this.templateList = templateList
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({ path: '/login' })
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        addTotemplate(draftId) {
            let params = {
                draftId: draftId
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/addTotemplate', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.errcode === 0) {
                    this.$message({
                        message: "添加到模板成功,刷新数据",
                        type: 'success'
                    });
                    this.getTemplateDraftList();
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({ path: '/login' })
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        handleClick() {
            if (this.activeName === '0') {
                this.getTemplateDraftList();
            } else if (this.activeName === '1') {
                this.getTemplateList();
            }
        },
        addVersion(item) {
            this.dialogForm.templateId = item.templateId
            this.dialogForm.appId = item.sourceMiniprogramAppid
            this.dialogVisible = true
        },
        confirm() {
            let params = this.dialogForm
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/addVersionInfo', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.errcode === 0) {
                    this.$message({
                        message: "添加小程序版本代码信息成功，刷新数据",
                        type: 'success'
                    });
                    this.getTemplateList();
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({ path: '/login' })
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        }
    },
}
</script>
<style lang="scss">
.codeManage {
    background: #fff;
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
    }

    .code-manage-dialog {
        .el-dialog {
            width: 450px;

            .el-dialog__header {
                text-align: center;
            }
        }
    }
}
</style>
